﻿@*<input type="hidden" id="id" value="@ViewBag.id" />*@
@{
    Layout = "~/Views/Shared/_CommonLayout.cshtml";
}
@using MinistryStandardPlatformWeb.Models;
@model IEnumerable<VehicleRealTimeInfo>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XjOymLQ7XokpmPICKh0xlSyw"></script>
<table style="display:none;" id="vehicleinfotable">
    @foreach(var item in Model)
    {
        <tr>
            <td>@item.VehicleId</td>
            <td>@item.Time</td>
            <td>@item.Speed</td>
            <td>@item.Location</td>
            <td>@item.Longitude</td>
            <td>@item.Latitude</td>
        </tr>
    }
</table>

<div id='@("allmap"+@ViewBag.id)' style="width: 100%;height: 100%;overflow: auto;margin:0;"></div>
<script type="text/javascript">
    var divid = '@("allmap" + @ViewBag.id)';
    var map = new BMap.Map(divid);            // 创建Map实例
    var point = new BMap.Point(114.312457, 30.590209);    // 创建点坐标
    map.centerAndZoom(point, 13);                     // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    var zIndex = 1000;
    $("#vehicleinfotable tr").each(function () {
        var vehicle = $(this).children("td").eq(0).html();
        var time = $(this).children("td").eq(1).html();
        var location = $(this).children("td").eq(3).html();
        var speed = $(this).children("td").eq(2).html();
        var longitude = $(this).children("td").eq(4).html();
        var latitude = $(this).children("td").eq(5).html();
        var point = new BMap.Point(longitude, latitude);
        map.centerAndZoom(point, 13);


        //var content = '<div>车辆:' + vehicle + '<br/>时间：' + time + '<br/>地点：' + location + '<br/>速度：' + speed + ' km/h</div>';
        //var infoWindow = new BMap.InfoWindow(content);
        //map.clearOverlays();

        var label = new BMap.Label(vehicle,{offset:new BMap.Size(-20,-18)});
        var content = '<div>车辆:' + vehicle + '<br/>时间：' + time + '<br/>地点：' + location + '<br/>速度：' + speed + ' km/h</div>';
        var marker1 = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker1);              // 将标注添加到地图中
        //var infoWindow = new BMap.InfoWindow(content);
        //marker1.openInfoWindow(infoWindow, point)
        marker1.setLabel(label);
        label.addEventListener("mouseover", labelHover.bind(null, marker1));
        marker1.addEventListener("mouseover", markerHover.bind(null));
        label.addEventListener("click", openInfo1.bind(null, content,marker1));
        marker1.addEventListener("click", openInfo.bind(null, content));
    });

    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 
        p.openInfoWindow(infoWindow,point); //开启信息窗口
    }

    function openInfo1(content,marker1, e) {
        var p = marker1;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 
        p.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    function labelHover(marker1, e) {
        var markers = map.getOverlays();
        for (var i = 0; i < markers.length; i++) {
            if (markers[i] instanceof BMap.Marker) {
                markers[i].setTop(false);
            }
        }
        marker1.setTop(true);
    }

    function markerHover(e) {
        var markers = map.getOverlays();
        for (var i = 0; i < markers.length; i++) {
            if (markers[i] instanceof BMap.Marker) {
                markers[i].setTop(false);
            }
        }
        var p = e.target;
        p.setTop(true);
    }
</script>